<template>
  <div>
    <!-- 丰富模式 -->
    <el-row
      v-if="!simpleModel"
      class="question-row"
    >
      <el-col :span="2"><b>ID:</b>{{ question.id }}</el-col>
      <el-col :span="22">
        <b>题干信息：</b>
        <el-link
          class="question-name"
          type="primary"
          @click="showInfo(question)"
          v-html="question.question"
        />
      </el-col>
      <el-col :span="10"><b>试题编号:</b>{{ question.quest_num }}</el-col>
      <el-col :span="4"><b>试题类型:</b>{{ question.quest_type | showQuestType }} </el-col>
      <el-col :span="5"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="5"><b>归属目录:</b>{{ question.directory_name }} </el-col>
      <el-col :span="10"><b>标签信息:</b>
        <span
          v-for="item in question.tag_info"
          :key="item"
        >{{ item }}&nbsp;</span>
      </el-col>
      <el-col :span="4"><b>发布状态:</b>
        <el-tag
          v-if="question.show_state==1"
          size="small"
          type="success"
        >上架</el-tag>
        <el-tag
          v-if="question.show_state==2"
          size="small"
          type="info"
        >下架</el-tag>

      </el-col>
      <el-col :span="5"><b>审核人:</b>{{ question.check_username || '暂无' }} </el-col>
      <el-col :span="5"><b>审核状态:</b>
        <el-tag
          v-if="question.check_state==1"
          size="small"
          type="warning"
        >待审核</el-tag>
        <el-tag
          v-if="question.check_state==2"
          size="small"
          type="success"
        >通过</el-tag>
        <el-tag
          v-if="question.check_state==3"
          size="small"
          type="danger"
        >不通过</el-tag>
      </el-col>
      <el-col :span="10"><b>审核意见:</b>
        {{ question.check_remarks || '暂无' }}
      </el-col>
      <el-col :span="4"><b>创建人:</b>{{ question.create_name }} </el-col>
      <el-col :span="5"><b>难度:</b>
        <span v-if="question.difficulty==1">简单</span>
        <span v-if="question.difficulty==2">中等</span>
        <span v-if="question.difficulty==3">较难</span>
      </el-col>
      <el-col :span="5"><b>发布时间:</b>{{ question.created_at | formatTime }} </el-col>
    </el-row>
    <!-- 简洁模式 -->
    <el-row
      v-else
      class="question-row"
    >
      <el-col :span="2"><b>ID:</b>{{ question.id }}</el-col>
      <el-col :span="22">
        <b>题干信息：</b>
        <el-link
          class="question-name"
          type="primary"
          @click="showInfo(question)"
          v-html="question.question"
        />
      </el-col>
      <el-col :span="4"><b>归属学科:</b>{{ question.subject_name }} </el-col>
      <el-col :span="4"><b>归属目录:</b>{{ question.directory_name }} </el-col>
      <el-col :span="7"><b>标签信息:</b>
        <span
          v-for="item in question.tag_info"
          :key="item"
        >{{ item }}&nbsp;</span>
      </el-col>
      <el-col :span="4"><b>发布状态:</b>
        <el-tag
          v-if="question.show_state==1"
          size="small"
          type="success"
        >上架</el-tag>
        <el-tag
          v-if="question.show_state==2"
          size="small"
          type="info"
        >下架</el-tag>

      </el-col>
      <el-col :span="4"><b>发布时间:</b>{{ question.created_at | formatTime }} </el-col>

    </el-row>

    <!-- 试题预览组件 -->
    <question-preview
      v-if="previewShow"
      v-model="previewShow"
      :question="previewInfo"
    />
  </div>
</template>

<script>
import QuestionPreview from '@/components/QuestionPreview'
export default {
  name: 'QuestionItem',
  components: {
    QuestionPreview
  },
  props: {
    // 试题信息
    question: {
      type: Object,
      require: true
    },
    // 简洁模式
    simpleModel: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      previewShow: false, // 试题预览显示
      previewInfo: {} // 预览试题内容
    }
  },
  methods: {
    // 试题预览显示
    showInfo(val) {
      this.previewShow = true
      this.previewInfo = val
    }
  }
}
</script>

<style scoped>
.question-row{
  line-height: 30px;
}
.question-row b{
  color: #aaa;
  font-weight: normal;
  margin-right: 5px;
}
.question-name{
  height: 20px;
  overflow: hidden;
}
</style>
